<template>
<div class="addressedit">
    <van-nav-bar fixed :title="this.flag===''?'新增地址':'修改地址'" left-arrow   @click-left="$router.go(-1)"  />
    <van-form @submit="onSubmit">
    <van-field
        v-model="form.name"
        name="姓名"
        label="姓名"
        placeholder="收货人姓名"
        :rules="[{ required: true, message: '请输入收货人姓名' }]"
    />
    <van-field
        v-model="form.tel"
        name="电话"
        label="电话"
        placeholder="收货人手机号"
        :rules="[{ required: true, message: '请输入收货人姓名' }]"
    />
    <van-field
    v-model="fieldValue"
    is-link
    readonly
    label="地区"
    placeholder="请选择所在地区"
    @click="isshow=true"
    />

    <van-popup  round position="bottom"   v-model="isshow">
    <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="isshow = false"
        @finish="onFinish"
    />
    </van-popup>

   <van-field
        v-model="detail"
        name="详细地址"
        label="详细地址"
        placeholder="收货人详细地址"
        :rules="[{ required: true, message: '请输入收货人详细地址' }]"
    />
    <div class="defaultadd">
        <span style="margin: 10px;">设置为默认地址</span>
        <van-switch v-model="checked" style="margin-left: 190px;margin-top: 0px;" />
    </div>
    <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="submit">提交</van-button>
    </div>
    </van-form>
</div>
</template>
<script>
import { getregiontree, addaddress, editAddress } from '@/api/address.js'
import { Toast } from 'vant'

export default {
  data () {
    return {
      isshow: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [],

      areaListbefore: {},

      username: '',
      phone: '',
      detail: '',
      checked: false,
      region: [],
      form: {},
      flag: ''
    }
  },
  methods: {
    async getAreaList () {
      const { data: { list } } = await getregiontree()
      // console.log(list)
      this.options = Object.values(list).map(item => ({
        value: item.id,
        text: item.name,
        level: item.level,
        pid: item.pid,
        children: item.city
      }))
      // console.log(this.options)
      this.options.forEach(item => {
        const newchildren = Object.values(item.children).map(v => ({
          value: v.id,
          text: v.name,
          level: v.level,
          pid: v.pid,
          children: v.region
        }))
        item.children = newchildren
      })
      // console.log(this.options)
      this.options.forEach(item => {
        item.children.forEach(city => {
          const newchildren = Object.values(city.children).map(v => ({
            value: v.id,
            text: v.name,
            level: v.level,
            pid: v.pid
          }))
          city.children = newchildren
        })
      })

      // console.log(this.options)
    },
    onSubmit (values) {
      console.log('submit', values)
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish ({ selectedOptions }) {
      this.isshow = false
      this.fieldValue = selectedOptions.map((option) => option.text).join('/')
      this.region = selectedOptions.map(item => ({
        label: item.text,
        value: item.value
      }))
      // console.log(this.region)
    },
    async submit () {
      if (this.flag === '') {
        const res = await addaddress(this.form.name, this.form.tel, this.region, this.detail)
        console.log(res)
        Toast('新增地址成功')
      } else {
        const res = await editAddress(this.form.id, this.form.name, this.form.tel, this.region, this.detail)
        console.log(res)
        Toast('修改地址成功')
      }
      this.$router.go(-1)
    },
    getform () {
      this.form = this.$route.query.form
      this.flag = this.form.name
    }

  },

  created () {
    this.getAreaList()
    this.getform()
    console.log(this.form)
  }

}
</script>
<style>
.addressedit{
    padding-top: 46px;
    padding-bottom: 46px;
}

.defaultadd {
  display: flex; /* 使用 flex 布局 */
  justify-content: space-between; /* 在主轴上两端对齐 */
  align-items: center; /* 在交叉轴上居中对齐 */
  color: #646566;
  padding: 2.66667vw 3.26667vw;
    overflow: hidden;

}
.defaultadd span {

 font-size:  3.73333vw;
 line-height:6.4vw;
}
.defaultadd .van-switch {
  margin-right: 10px; /* 设置右边距 */
}
</style>
